<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
	xmlns: shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include::header"></head>
<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="col-sm-12">
			<div class="ibox">
				<div class="ibox-body">
					<div id="exampleToolbar" role="group">
						<button type="button"
							class="btn btn-primary" onclick="add()" >
							<i class="fa fa-plus" aria-hidden="true" ></i>添加
						</button>
						<button type="button"
							class="btn btn-danger" onclick="deletall()" >
							<i class="fa fa-trash" aria-hidden="true" ></i>删除
						</button>
					</div>
					<table id="exampleTable" data-mobile-responsive="true">
					</table>
				</div>
			</div>
		</div>
	</div>
	<div th:include="include::footer"></div>
</body>
<script>
	$(function(){
        loadData();
	})
    function loadData(){
        $('#exampleTable')
            .bootstrapTable(
                {
                    method : 'post', // 服务器数据的请求方式 get or post
                    url : "/sys/role/list", // 服务器数据的加载地址
                    striped : true, // 设置为true会有隔行变色效果
                    dataType : "json", // 服务器返回的数据类型
                    pagination : true, // 设置为true会在底部显示分页条
                     // queryParamsType : "limit",
                    // //设置为limit则会发送符合RESTFull格式的参数
                    singleSelect : false, // 设置为true将禁止多选
                    iconSize : 'outline',
                    toolbar : '#exampleToolbar',
                    // contentType : "application/x-www-form-urlencoded",
                    // //发送到服务器的数据编码类型
                    pageSize : 3, // 如果设置了分页，每页数据条数
                    pageNumber : 1, // 如果设置了分布，首页页码
                    // search : true, // 是否显示搜索框
                    // showColumns : true, // 是否显示内容下拉框（选择显示的列）
                    sidePagination : "client", // 设置在哪里进行分页，可选值为"client" 或者
                    // "server"
                  queryParams : function(params){//模糊查询
                        return {
                            searchName:$('#searchName').val(),
                            searchEmail:$('#searchEmail').val()
                        }
                    },
                    // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                    // queryParamsType = 'limit' ,返回参数必须包含
                    // limit, offset, search, sort, order 否则, 需要包含:
                    // pageSize, pageNumber, searchText, sortName,
                    // sortOrder.
                    // 返回false将会终止请求
                    columns : [
                        { // 列配置项
                            // 数据类型，详细参数配置参见文档http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
                            checkbox : true
                            // 列表中显示复选框

                        },
                        {
                            field: 'roleId',
                            title: 'ID'
                        }
                        ,{
                            field:'roleName',
                            title:'姓名'
                        },{
                            field:'remark',
                            title:'权限'
                        },{
                            field:'roleId',
							title:'操作',
							formatter:function(value,item,index){
                                var editBtn='<button type="button" onclick="edit('+value+')"'  +
                                    '\t\t\t\t\t\t\tclass="btn btn-primary">' +
                                    '\t\t\t\t\t\t\t<i class="glyphicon glyphicon-th-list" aria-hidden="true"></i>修改' +
                                    '\t\t\t\t\t\t</button>';
                                var delBtn='<button type="button" onclick="del('+value+')" ' +
                                    '\t\t\t\t\t\t\tclass="btn btn-danger" >' +
                                    '\t\t\t\t\t\t\t<i class="glyphicon glyphicon-remove" aria-hidden="true"></i>删除' +
                                    '\t\t\t\t\t\t</button>';
                                return editBtn+delBtn;
							}
						}

                    ]
                });
    }

    function del(id){
	    $.post(
            "/sys/role/delete",
			{id:id},
			function(data){

                     if(data.code==200){
                         layer.alert("删除成功");
                         reload();
					 }else{
                        layer.msg("删除成功",{icon:2});
					 }

			},"json"
		)
	}

	function add(){
        layer.open({
            type: 2,
            area: ['900px', '550px'],
            fixed: false, //不固定
            maxmin: true,
            content: '/sys/role/add'
        });
	}
	function reload(){

        $('#exampleTable').bootstrapTable("refresh");
	}

    function deletall(){
        var rows=$('#exampleTable').bootstrapTable('getSelections');

        var ids=new Array();
        $.each(rows,function(item,i){
           ids.push(i.roleId);
		})
		console.log(ids);
		if(ids.length<=0){
            layer.alert("请至少选择一条要删除的");
            return ;
		}
		layer.confirm("确定删除么",{btn:["确定","取消"]},function(){

		    $.ajax({
				url:"/sys/role/delall",
				data:{ids:ids},
				dataType:"json",
				type:"post",
				success:function(data){

				    if(data.code==200){
				        layer.alert("删除成功");
				        reload();

					}else{
				        layer.alert("删除失败");
					}
				}
			})
		})
    }
    //修改
    function edit(id){

        layer.open({
            type: 2,
            area: ['900px', '550px'],
            fixed: false, //不固定
            maxmin: true,
            content: '/sys/role/edit/'+id
        });
    }
</script>
</html>